<template>
    <div class="default-main ba-table-box">
      <!-- 表格顶部菜单 -->
      <TableHeader
        :buttons="['refresh', 'comSearch', 'columnDisplay']"
        :quick-search-placeholder="placeholder"
        @action="baTable.onTableHeaderAction"
      />
      <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
      <Table ref="tableRef" @action="baTable.onTableAction" />
      <!-- 表单 -->
      <!-- <PopupForm v-if="baTable.form.operate ? true : false" /> -->
    </div>
  </template>
  <script lang="ts" setup>
  import {
    ref,
    provide,
    onMounted,
    markRaw,
    reactive,
    onBeforeUnmount,
  } from "vue";
  import baTableClass from "@/utils/baTable";
  import { baTableApi, operatorShowOff, getDictData } from "@/utils/common"; // 导入表格api方法生成器
  import Table from "@/components/table/index.vue";
  import TableHeader from "@/components/table/header/index.vue";
  import { InventoryInfo } from "@/api/backend/index";
  import { useRoute, useRouter } from "vue-router";
  import useCurrentInstance from "@/utils/useCurrentInstance";
  import type { TableRow, TableColumn } from "@/utils/baTable"; //表格列行类型
  import { useNavTabs } from "@/store/navTabs";
  // import PopupForm from "./popupForm.vue";
  import { useDictionary } from "@/store/backend/tool/dictionary";
  // import Tag from "./components/tag.vue";
  import TagSearch from "@/components/tagSearch/index.vue";
  import { useStoreWarehouseLocation } from "@/store/backend/StoreroomM/Location";
  
  const placeholder = ref<string>("模糊搜索");
  const tableRef = ref();
  const route = useRoute();
  const router = useRouter();
  const navTabs = useNavTabs();
  const dictionary = useDictionary();
  const Location = useStoreWarehouseLocation();
  
  //全局事件总线
  const { proxy } = useCurrentInstance();
  const state: {} = reactive({});
  
  //字段显隐记忆功能
  const filedShowOff = (filter: any) => {
    if ((navTabs as any).columnDisplayStoreMap) {
      return (navTabs as any).columnDisplayStoreMap.get(
        route.path + "/" + filter
      );
    }
    return true;
  };
  // 每页个数记忆功能
  const pageSizeKeep = () => {
    if ((navTabs as any).pageSizeMap) {
      return (navTabs as any).pageSizeMap.get(route.path + InventoryInfo)
        ? (navTabs as any).pageSizeMap.get(route.path + InventoryInfo)
        : 10;
    }
    return 10;
  };
  
  const baTable = new baTableClass(
    new baTableApi(InventoryInfo), //this.api = api部门管理
    {
      expandAll: true,
      pk: "materialRecordId",
      column: [
        { type: "selection", align: "center", operator: false },
        {
          show: filedShowOff("materialName"),
          label: "物料名称",
          prop: "materialName",
          align: "left",
          operatorPlaceholder: "模糊搜索",
        },
        {
          show: filedShowOff("materialCode"),
          label: "物料编号",
          prop: "materialCode",
          align: "left",
          operatorPlaceholder: "模糊搜索",
        },
        {
          show: filedShowOff("materialType"),
          label: "物料型号",
          prop: "materialType",
          align: "left",
          operatorPlaceholder: "模糊搜索",
        },
        {
          show: filedShowOff("realNumber"),
          label: "真实数量",
          prop: "realNumber",
          align: "center",
          operator: false,
        },
        {
          show: filedShowOff("systemCalculateNumber"),
          label: "系统计算量",
          prop: "systemCalculateNumber",
          align: "center",
          operator: false,
        },
        // {
        //   show: filedShowOff("materialRecordType"),
        //   label: "出入库类型",
        //   prop: "materialRecordType",
        //   render: "customRender",
        //   customRender: markRaw(Tag),
        //   comSearchRender: "customRender",
        //   comSearchCustomRender: markRaw(TagSearch),
        // },
        // {
        //   show: filedShowOff("purpose"),
        //   label: "用途",
        //   prop: "purpose",
        //   render: "customRender",
        //   customRender: markRaw(Tag),
        //   comSearchRender: "customRender",
        //   comSearchCustomRender: markRaw(TagSearch),
        // },
        {
          show: filedShowOff("unit"),
          label: "单位",
          prop: "unit",
          align: "center",
          operator: false,
        },
        {
          show: filedShowOff("warningLine"),
          label: "物料存储警戒线",
          prop: "warningLine",
          align: "center",
          operator: false,
        },
  
        {
          show: operatorShowOff([
            route.path + "/edit",
            route.path + "/add",
            route.path + "/remove",
          ]),
          label: "操作",
          align: "center",
          operator: false,
          render: "buttons",
          fixed: "right",
          width: "150",
          buttons: [
            {
              render: "tipButton",
              name: "info", //绑定edit
              title: "详情",
              text: "",
              type: "primary",
              icon: "iconfont icon-chaxunyujisuan",
              class: "table-row-edit",
              disabledTip: false,
              display: (row: TableRow, field: TableColumn) => {
                if (row.state === 2) {
                  //未激活状态无法查看实时数据
                  return false;
                }
                return true;
              },
              // 按钮是否禁用，请返回布尔值
              disabled: (row: TableRow, field: TableColumn) => {
                return false;
              },
              attr: {},
            },
          ],
        },
      ],
      filter: {
        pageSize: pageSizeKeep(),
      },
      extend: {
        maxHeight: 580,
      },
    },
    {
      defaultItems: { parentId: 0, parentCode: "0" },
    },
    {}
  );
  
  //获取仓库空间/物料类型字典
  const getMenuStatus = () => {
    //出入库类型
    if (
      JSON.stringify(dictionary.moreTags) == "{}" ||
      !JSON.stringify(dictionary.moreTags["materialRecordType"])
    ) {
      dictionary.getDictInfo("sys_materialrecord_type").then((res: any) => {
        dictionary.moreTags["materialRecordType"] = getDictData(res);
        dictionary.moreTags["materialRecordTypeOrigin"] = res;
      });
    }
    //出入库用途
    if (
      JSON.stringify(dictionary.moreTags) == "{}" ||
      !JSON.stringify(dictionary.moreTags["purpose"])
    ) {
      dictionary.getDictInfo("sys_materialrecord_purpose").then((res: any) => {
        dictionary.moreTags["purpose"] = getDictData(res);
        dictionary.moreTags["purposeOrigin"] = res;
      });
    }
  };
  //获取部门类型字典
  getMenuStatus();
  
  onMounted(() => {
    //全局事件总线
    const { proxy } = useCurrentInstance();
    //将table的ref给到table类
    baTable.table.ref = tableRef.value;
    baTable.mount();
    baTable.getList(InventoryInfo);
    /**
     * 表格内的按钮响应
     * @param name 按钮name
     * @param row 被操作行数据
     */
  
    proxy.eventBus.on(
      "onTableButtonClick",
      (data: { name: string; row: TableRow }) => {}
    );
  });
  // 实例化表格后，将 baTable 的实例提供给上下文
  provide("baTable", baTable);
  provide("dictionary", dictionary);
  provide("Location", Location);
  </script>
  <style lang="scss" scoped></style>
  